<template>
  <var-row :gutter="10">
    <var-app-bar
    round
    image="https://fitzone.work/img/gym.jpg"
    image-linear-gradient="to right top, rgba(29, 68, 147, 0.5) 0%, rgba(74, 198, 170, 0.9) 100%"
    style="margin-bottom: 30px;"
  >
    <template #left>
      <var-avatar :src="userStore.avatar" size="small" />
        <h3  round text color="transparent" text-color="#fff">{{ userStore.nickName }}</h3>
    </template>

    <template #right>
      
        <h3 round text color="transparent" text-color="#fff">{{day}}/{{ month }}/{{ year }} {{ dayList[weekDay] }} </h3>
      
      
    </template>

    <template #content>
      <var-tabs
        style="margin-bottom: 80px;"
        color="transparent"
        active-color="#fff"
        inactive-color="#ddd"
        
      >
      <h1>Welcome to fitzone!</h1>
      </var-tabs>
    </template>
  </var-app-bar>
  Facilities
    <var-card 
    ripple
    layout="row"
    v-model:floating="floating"
    @click="floating = true"
    :elevation="0"
    v-for="item in facilityList"
    :key="item"
    :title=item.f_name
    :description="'$'+item.price"
    :subtitle="item.location"
    :src="'https://fitzone.work/img/'+item.img"
    style="margin-bottom: 15px;"
    >
    </var-card>
    <var-skeleton
      title
      avatar
      :rows="3"
      :loading="loading"
      v-for="index in 6"
      :key="index"
    >
    </var-skeleton>
    <var-skeleton
      title
      avatar
      :rows="3"
      :loading="loading"
      @change="loading"
      v-for="index in 6"
      :key="index"
    >
    </var-skeleton>
  </var-row>
</template>


<script>
import {reactive} from 'vue';
import { Dialog } from 'vant';
import MsgList from "@/components/MsgList/index.vue"
import axios from 'axios';
import { ref, onMounted} from 'vue'
import { StyleProvider, Themes } from '@varlet/ui'
import {ElContainer,ElHeader,ElMain,ElFooter} from 'element-plus' 
import { useUserStore } from '@/stores/user';



const currentDate = ref(new Date())
var currentTheme = null
let facilityList = []
const floating = ref(false)
let loading = true
const userStore = useUserStore();
const now = new Date();
const year = now.getFullYear();
const month = now.getMonth()+1;
const day = now.getDate();
const weekDay = now.getDay();

export default {
  data(){
    return{
      facilityList:[],
      dayList:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],
      userStore:userStore,
      year:year,
      month:month,
      day:day,
      weekDay:weekDay,
      facilityList:[],
      dayList:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],
      userStore:userStore,
      year:year,
      month:month,
      day:day,
      weekDay:weekDay
    }
  },
  created(){
  axios
  .get('https://fitzone.work:8080/all')
  .then(res =>{
    console.log(res.data);
    this.facilityList = res.data
    console.log(this.facilityList)
    this.loading = false;
    console.log(this.loading)
  })
  .catch(err =>{
    console.error(err);
  })
  }
    
  
}
</script>

<style>
.time {
  font-size: 12px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button {
  padding: 0;
  min-height: auto;
}

.image {
  width: 100%;
  display: block;
}
</style>